/* eslint-disable jsx-a11y/anchor-is-valid */
import * as echarts from 'echarts'
import { useEffect, useState } from 'react'
import styles from './index.module.scss'
import redPoint from '@/assets/Home/redPoint.svg'
import yellowPoint from '@/assets/Home/yellowPoint.svg'
import garyPoint from '@/assets/Home/grayPoint.svg'
import card1 from '@/assets/Home/card1.png'
import card2 from '@/assets/Home/card2.png'
import sign from '@/assets/Home/sign.png'
import floor1 from '@/assets/Home/floor/floor1.png'
import floor2 from '@/assets/Home/floor/floor2.png'
import floor3 from '@/assets/Home/floor/floor3.png'
import floor4 from '@/assets/Home/floor/floor4.png'
import floor5 from '@/assets/Home/floor/floor5.png'
import floor6 from '@/assets/Home/floor/floor6.png'
import floor7 from '@/assets/Home/floor/floor7.png'
import floor8 from '@/assets/Home/floor/floor8.png'
import floor9 from '@/assets/Home/floor/floor9.png'
import floor10 from '@/assets/Home/floor/floor10.png'
import floor11 from '@/assets/Home/floor/floor11.png'
import floor12 from '@/assets/Home/floor/floor12.png'
import floor13 from '@/assets/Home/floor/floor13.png'
import floorHover from '@/assets/Home/floor/floorHover.png'
import { Link } from 'react-router-dom'
const Home = () => {

  useEffect(() => {
    // var myChart1 = echarts.init(document.getElementById('chart1'))

    // let option = {
    //   xAxis: {
    //     type: 'category',
    //     data: ['11:00', '12:00', '13:00', '当前']
    //   },
    //   yAxis: {
    //     type: 'value'
    //   },
    //   series: [
    //     {
    //       data: [11, 12, 13, 14],
    //       type: 'line',
    //       smooth: true
    //     }
    //   ]
    // }

    // option && myChart1.setOption(option);

    var chartDom = document.getElementById('rightCenterChart')
    var myChart = echarts.init(chartDom)
    var option

    option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '15%',
        orient: 'vertical',
        left: '200',
        icon: 'rect',
        textStyle: {
          color: '#fff',
          fontSize: 16,
          fontFamily: "Harmony"
        },
        data: ['晨间护理', '夜间翻身', '日常巡查', '床边助餐', '康复治疗']
      },
      series: [
        {
          name: 'Pie',
          type: 'pie',
          padAngle: 5,
          radius: ['70%', '80%'],
          center: ['20%', '50%'],
          // avoidLabelOverlap: false,
          // itemStyle: {
          //   borderRadius: 10,
          //   borderColor: '#fff',
          //   borderWidth: 2
          // },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          label: {
            show: false,
            position: 'center'
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 10, name: '晨间护理' },
            { value: 20, name: '夜间翻身' },
            { value: 30, name: '床边助餐' },
            { value: 40, name: '康复治疗' },
            { value: 50, name: '日常巡查' },
          ]
        }
      ]
    }

    option && myChart.setOption(option)

  }, [])

  const [isHover, setIsHover] = useState(false)
  return (
    <div className={styles.main}>
      <div className={styles.left}>
        <p className={styles.title}>
          院区概览
        </p>
        <div className={styles.box1}>
          普青年养老院（东方路）
        </div>
        <div className={styles.box}>
          <div className={styles.subBox}
            style={{
              marginRight: 12,
              marginBottom: 13
            }}
          >
            <div className={styles.boxText1}>总员工数</div>
            <div className={styles.boxText2}>81</div>
            <div className={styles.boxText3}>2未打卡</div>
          </div>
          <div className={styles.subBox}
            style={{
              marginBottom: 13
            }}
          >
            <div className={styles.boxText1}>总长者数</div>
            <div className={styles.boxText2}>157</div>
            <div className={styles.boxText3}>2请假</div>
          </div>
          <div className={styles.subBox}
            style={{
              marginRight: 12
            }}
          >
            <div className={styles.boxText1}>无感设备</div>
            <div className={styles.boxText2}>23</div>
            <div className={styles.boxText3}>2未连接</div>
          </div>
          <div className={styles.subBox}>
            <div className={styles.boxText1}>在住床位</div>
            <div className={styles.boxText2}>159</div>
            <div className={styles.boxText3}>31空闲中</div>
          </div>
        </div>
        <div className={styles.box2}>
          <div className={styles.box2Content}>
            温度检测
            <a href="#" className={styles.link}>{'>'}</a>
            <div className={styles.box2Chart} id='chart1'>

            </div>
          </div>
        </div>
        <div className={styles.box2}>
          <div className={styles.box2Content}>
            能源统计
            <a href="#" className={styles.link}>{'>'}</a>
            <div className={styles.box2Chart}>

            </div>
          </div>
        </div>
      </div>
      <div className={styles.right}>
        <div className={styles.rightTitle}>
          今日任务完成情况
        </div>
        <div className={styles.rightBox}>
          <div className={styles.rightBox1}
            style={{
              marginRight: 10
            }}
          >
            <div className={styles.rightBoxText1}>
              任务按时完成率
            </div>
            <div className={styles.rightBoxText2}>
              97%
            </div>
            <div className={styles.rightBoxText3}>
              <span className={styles.rightBoxText3Span1}>
                ↑3.1%
              </span>
              <span className={styles.rightBoxText3Span2}>
                较昨日
              </span>
              <span>
                <a href="#" className={styles.rightBoxText3Span3}>{'>'}</a>
              </span>
            </div>
          </div>
          <div className={styles.rightBox1}
            style={{
              marginRight: 10
            }}
          >
            <div className={styles.rightBoxText1}>
              未完成数量
            </div>
            <div className={styles.rightBoxText2}>
              23
            </div>
            <div className={styles.rightBoxText3}>
              <span className={styles.rightBoxText3Span1}>
                ↓2
              </span>
              <span className={styles.rightBoxText3Span2}>
                较昨日
              </span>
              <span>
                <a href="#" className={styles.rightBoxText3Span3}>{'>'}</a>
              </span>
            </div>
          </div>
        </div>
        <div className={styles.rightCenter}>
          <div className={styles.rightCenterText}>
            未完成类型
          </div>
          <div className={styles.rightCenterChart} id='rightCenterChart'>
          </div>
        </div>

        <div className={styles.rightBottomText}>
          告警信息
        </div>

        <div className={styles.rightBottomBox1}>
          <div className={styles.rightBottomBox1Title}>
            正在告警
            <span className={styles.rightBottomBox1Text1}>
              <img src={redPoint} alt=""
                style={{
                  marginRight: 9,
                  marginBottom: 2
                }}
              />
              <span>紧急</span>
            </span>
            <span className={styles.rightBottomBox1Text2}>
              <img src={yellowPoint} alt=""
                style={{
                  marginRight: 9,
                  marginBottom: 2
                }}
              />
              <span>提示</span>
            </span>
          </div>
          <div className={styles.rightBottomBox1Line1}>
            <span>
              <img src={redPoint} alt=""
                style={{
                  marginRight: 22,
                  marginBottom: 2
                }}
              />
            </span>
            <span>
              如厕过久
            </span>
            <span className={styles.rightBottomBox1Line1Text1}>
              {'>'}40分钟
            </span>
            <span className={styles.rightBottomBox1Line1Text2}>
              陈爷爷
            </span>
            <span className={styles.rightBottomBox1Line1Text2}
              style={{
                marginLeft: 11
              }}>
              南309
            </span>
            <span className={styles.rightBottomBox1Line1Text3}>
              16:35
            </span>
          </div>
          <div className={styles.rightBottomBox1Line2}>
            <span>
              <img src={yellowPoint} alt=""
                style={{
                  marginRight: 22,
                  marginBottom: 2
                }}
              />
            </span>
            <span>
              RFID离线
            </span>
            <span className={styles.rightBottomBox1Line1Text1}
              style={{
                marginLeft: 21
              }}
            >
              ------
            </span>
            <span className={styles.rightBottomBox1Line1Text4}
            >
              ------
            </span>
            <span className={styles.rightBottomBox1Line1Text2}
              style={{
                marginLeft: 11,
                backgroundColor: 'rgba(255, 234, 43, 0.3)',
                color: '#DAC508'
              }}>
              南309
            </span>
            <span className={styles.rightBottomBox1Line1Text3}>
              12:10
            </span>
          </div>
        </div>

        <div className={styles.rightBottomBox2}>
          <div className={styles.rightBottomBox2Title}>
            告警历史
          </div>
          <div className={styles.rightBottomBox2Line1}>
            <span>
              <img src={garyPoint} alt=""
                style={{
                  marginRight: 22,
                  marginBottom: 2
                }}
              />
            </span>
            <span>
              夜间离房
            </span>
            <span className={styles.rightBottomBox1Line1Text1}
              style={{
                marginLeft: 21
              }}
            >
              ------
            </span>
            <span className={styles.rightBottomBox1Line1Text4}
              style={{
                marginLeft: 23
              }}
            >
              张爷爷
            </span>
            <span className={styles.rightBottomBox1Line1Text4}
              style={{
                marginLeft: 11
              }}
            >
              南302
            </span>
            <span className={styles.rightBottomBox1Line1Text3}>
              03:17
            </span>
          </div>
        </div>
      </div>

      <div className={styles.center}>
        <div className={styles.centerTitle}>
          今日人员状态
        </div>
        <div style={{
          display: 'flex',
          position: 'absolute',
          top: 96,
          left: 65
        }}>
          <div className={styles.centerCard}
            style={{
              marginRight: 12
            }}>
            <div className={styles.centerCardTitle}>
              员工负荷
            </div>
            <div className={styles.centerCardSubTitle}>
              平均步数
            </div>
            <img src={card1} alt="" className={styles.centerCardImg} />
            <div className={styles.centerCardLine}>
              ↑3.1%
              <span style={{
                marginLeft: 5,
                color: 'rgba(255, 255, 255, 0.6)'
              }}>
                较昨日
              </span>
              <a href="#"
                style={{
                  marginLeft: 10,
                  textDecoration: 'none',
                  color: 'rgba(255, 255, 255, 0.6)'
                }}
              >{'>'}</a>
            </div>
          </div>
          <div className={styles.centerCard}>
            <div className={styles.centerCardTitle}>
              老人活力值
            </div>
            <div className={styles.centerCardSubTitle}>
              平均在房间外时间
            </div>
            <img src={card2} alt="" className={styles.centerCardImg} />
            <div className={styles.centerCardLine}>
              ↑3.1%
              <span style={{
                marginLeft: 5,
                color: 'rgba(255, 255, 255, 0.6)'
              }}>
                较昨日
              </span>
              <a href="#"
                style={{
                  marginLeft: 10,
                  textDecoration: 'none',
                  color: 'rgba(255, 255, 255, 0.6)'
                }}
              >{'>'}</a>
            </div>
          </div>
        </div>
        <div>
          <div className={styles.centerFloor1}>
            <img src={floor1} alt="" />
          </div>
          <div className={styles.centerFloor2}>
            <img src={floor2} alt="" />
          </div>
          <div className={styles.centerFloor3}>
            <Link to='/floor'>
              <img src={isHover ? floorHover : floor3} alt=""
                onMouseEnter={() => setIsHover(true)}
                onMouseLeave={() => setIsHover(false)}
              />
            </Link>
          </div>
          <div className={styles.centerFloor4}>
            <img src={floor4} alt="" />
          </div>
          <div className={styles.centerFloor5}>
            <img src={floor5} alt="" />
          </div>
          <div className={styles.centerFloor6}>
            <img src={floor6} alt="" />
          </div>
          <div className={styles.centerFloor7}>
            <img src={floor7} alt="" />
          </div>
          <div className={styles.centerFloor8}>
            <img src={floor8} alt="" />
          </div>
          <div className={styles.centerFloor9}>
            <img src={floor9} alt="" />
          </div>
          <div className={styles.centerFloor10}>
            <img src={floor10} alt="" />
          </div>
          <div className={styles.centerFloor11}>
            <img src={floor11} alt="" />
          </div>
          <div className={styles.centerFloor12}>
            <img src={floor12} alt="" />
          </div>
          <div className={styles.centerFloor13}>
            <img src={floor13} alt="" />
          </div>
        </div>
        <div className={styles.centerSign}>
          <img src={sign} alt="" />
        </div>

      </div>
    </div>
  )
}

export default Home